<template>
	<div class="game-container report-container">
		<div class="view-container dealer-container">
			<!-- <div class="head flex-h-end">
				<el-form ref="form" :inline="true" :model="queryData">
					<el-form-item>
						<el-button
							v-if="hasPermission('580')"
							type="warning"
							class="pattern"
							:disabled="loading"
							size="medium"
							@click="addLabel"
						>
							{{ $t('common.create') }}
						</el-button>
					</el-form-item>
				</el-form>
			</div> -->
			<div class="content">
				<el-table
					v-loading="loading"
					element-loading-spinner="el-icon-loading"
					border
					size="mini"
					class="small-size-table"
					:data="tableData"
					style="width: 100%"
					:header-cell-style="getRowClass"
					highlight-current-row
				>
					<el-table-column
						prop="id"
						align="center"
						:label="$t('agent.level')"
						min-width="128"
					></el-table-column>
					<el-table-column
						prop="levelName"
						align="center"
						:label="$t('agent.name')"
						min-width="254"
					>
						<template slot-scope="scope">
							{{ scope.row.levelName || '-' }}
						</template>
					</el-table-column>
					<el-table-column
						prop="createdBy"
						align="center"
						:label="$t('common.createBy')"
						min-width="260"
					>
						<template slot-scope="scope">
							{{ scope.row.createdBy || '-' }}
						</template>
					</el-table-column>
					<el-table-column
						prop="createdAt"
						align="center"
						:label="$t('common.createAt')"
						min-width="260"
					>
						<template slot-scope="scope">
							{{ scope.row.createdAt || '-' }}
						</template>
					</el-table-column>
					<el-table-column
						prop="updatedBy"
						align="center"
						:label="$t('common.last_updateBy')"
						min-width="260"
					>
						<template slot-scope="scope">
							{{ scope.row.updatedBy || '-' }}
						</template>
					</el-table-column>
					<el-table-column
						prop="updatedAt"
						align="center"
						:label="$t('common.last_updateAt')"
						min-width="260"
					>
						<template slot-scope="scope">
							{{ scope.row.updatedAt || '-' }}
						</template>
					</el-table-column>
					<el-table-column
						prop="operating"
						align="center"
						:label="$t('common.actions')"
						min-width="240"
						fixed="right"
					>
						<template slot-scope="scope">
							<el-button
								v-if="hasPermission('204021')"
								type="primary"
								size="medium"
								@click="edit(scope.row)"
							>
								{{ $t('common.edit') }}
							</el-button>
						</template>
					</el-table-column>
				</el-table>
				<!-- 分页 -->
			</div>
			<el-dialog
				:visible.sync="dialogFormVisible"
				center
				:destroy-on-close="true"
				width="970px"
				:title="title"
			>
				<!-- <div class="form-header">
					<span style="text-align: center;display: inline-block;width: 100%;">{{ title }}</span>
				</div> -->
				<el-form
					ref="formSub"
					label-width="auto"
					class="demo-form-inline"
					:model="dialogForm"
				>
					<el-form-item
						:label="$t('agent.level') + ':'"
						prop="id"
						:rules="[
							{
								required: true,
								message: $t('agent.rule_input_tip_level'),
								trigger: 'blur'
							}
						]"
					>
						<el-input
							v-model="dialogForm.id"
							disabled
							style="width: 300px"
							class="chief"
						></el-input>
					</el-form-item>
					<el-form-item
						:label="$t('agent.level_name')"
						:rules="[
							{
								required: true,
								message: $t('agent.rule_input_tip_agent'),
								trigger: 'blur'
							}
						]"
						prop="levelName"
					>
						<el-input
							v-model="dialogForm.levelName"
							:maxlength="20"
							style="width: 300px"
							placeholder=""
						></el-input>
					</el-form-item>
				</el-form>
				<el-divider></el-divider>
				<span slot="footer" class="dialog-footer">
					<el-button @click="reset">
						{{ $t('common.cancel') }}
					</el-button>
					<el-button
						type="primary"
						:disabled="loading"
						size="medium"
						@click="add"
					>
						{{ $t('common.sure') }}
					</el-button>
				</span>
			</el-dialog>
		</div>
	</div>
</template>

<script>
import list from '@/mixins/list'

export default {
	name: 'GameLabel',
	mixins: [list],
	data() {
		return {
			id: '',
			queryData: {},
			backEnumsList: [],
			tableData: [],
			dialogFormVisible: false,
			dialogForm: {
				proxyLevel: ''
			},
			title: '',
			isDisabled: true
		}
	},
	computed: {},
	created() {
		this.getBackEnums()
	},
	mounted() {},
	methods: {
		getBackEnums() {
			this.$api.getProxylevelnameList().then((res) => {
				if (res?.code === 200) {
					const hierarchy = []
					for (let i = 0; i < res.data.length; i++) {
						const element = res.data[i].proxyLevel
						hierarchy.push(element)
					}
					this.backEnumsList = hierarchy.sort()
					const proxyLevel =
						this.backEnumsList[this.backEnumsList.length - 1] + 1

					if (this.backEnumsList.length === 0) {
						this.dialogForm.proxyLevel = 1
					} else {
						this.dialogForm.proxyLevel = proxyLevel
					}
				}
			})
		},

		reset() {
			this.loadData()
			this.dialogFormVisible = false
		},
		loadData() {
			this.loading = true
			let params = {
				...this.queryData
			}
			params = {
				...this.getParams(params)
			}
			this.$api
				.getProxylevelproxyList(params)
				.then((res) => {
					this.loading = false
					if (res?.code === 200) {
						this.tableData = res.data || []
						// this.total = res?.data?.totalRecord || 0
					} else {
						// this.loading = false
					}
				})
				.catch(() => {
					this.loading = false
				})
		},
		addLabel() {
			if (this.tableData.length === 10) {
				this.$message.error(this.$t('agent.rule_other_tip4'))
			} else {
				this.title = this.$t('common.create')
				this.isDisabled = false
				this.dialogFormVisible = true
				this.getBackEnums()
			}
		},
		edit(val) {
			this.title = this.$t('common.edit')
			this.dialogForm = { ...val }
			this.dialogFormVisible = true
			this.isDisabled = true
		},
		add() {
			this.$refs.formSub.validate((valid) => {
				if (valid) {
					if (this.title === this.$t('common.create')) {
						const params = { ...this.dialogForm }
						this.$api.getProxyleveladd(params).then((res) => {
							if (res?.code === 200) {
								this.$message.success(
									this.$t('agent.create_success')
								)
								this.pageNum = 1
								this.loadData()
							}
							this.dialogFormVisible = false
						})
					} else {
						const params = { ...this.dialogForm }
						const id = params.id
						const proxyLevel = params.proxyLevel
						const levelName = params.levelName
						this.$api
							.getProxylevelupdate({ id, proxyLevel, levelName })
							.then((res) => {
								if (res?.code === 200) {
									this.$message.success(
										this.$t('common.edit_success')
									)
									this.loadData()
								}
								this.dialogFormVisible = false
							})
					}
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.demo-form-inline {
	padding-left: 150px;
	// padding-top: 30px;
}
.el-form--inline {
	line-height: 4;
}
.sun {
	width: 120px;
}
.chief {
	width: 180px;
}
.form-header {
	width: 930px;
	left: 0;
	// background-color: #d3d7df;
	height: 45px;
	line-height: 45px;
	span:nth-child(1) {
		position: absolute;
		// left: 30px;
		top: 65px;
		color: #666;
		font-size: 24px;
		font-weight: 700;
	}
	span:nth-child(2) {
		position: absolute;
		right: 30px;
		color: #999;
		font-weight: 400;
		font-size: 18px;
		top: 60px;
	}
}
.pattern {
	padding-left: 8px;
	padding-right: 8px;
}
::v-deep .el-dialog__header {
	text-align: center;
	color: #909399;
	font-weight: 700;
}
::v-deep .tagheight .el-tag {
	height: 24px;
	line-height: 24px;
	min-width: 60px;
}
::v-deep .el-input-number__decrease,
::v-deep .el-input-number__increase {
	display: none;
}
::v-deep .el-input__inner {
	padding: 0 15px;
	text-align: left;
}
</style>
